<template>
    <a-page-header :title="getTitle()" @back="() => router.back()">
        <template #extra>
            <DownloadOutlined style="font-size: .5rem;" @click="exportData" />
        </template>
    </a-page-header>
    <a-table bordered :columns :dataSource="tableData" :pagination :scroll="{ y: 1000 }" @change="changeData">
        <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'putImg'">
                <a-image :src="imgSrc(record.putImg)" alt="" :width="80" />
            </template>
            <template v-if="column.dataIndex === 'outImg'">
                <a-image :src="imgSrc(record.outImg)" alt="" :width="80" />
            </template>
        </template>
    </a-table>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { db } from '@/utils/DexieDB';
import { computed, onMounted, ref } from 'vue';
import TableColumns from '@/utils/TableColumns';
import { convertDataToStringWithOrder, isAndroid } from '@/utils/UtilFun';
import { DownloadOutlined } from '@ant-design/icons-vue';
import tableHeader from '@/utils/ExportTableHead';


// 定义记录类型枚举
type RecordType = 'put' | 'history' | 'out' | 'alarm' | 'disinfect';
type tName = 'device' | 'testTube' | 'testTubeHistory' | 'nurse' | 'whites' | 'error' | 'disinfect' | 'retryTasks'

const router = useRouter();
const recordType = router.currentRoute.value.query.type as string
const tableName = router.currentRoute.value.query.tableName as tName
const recordsName: Record<RecordType, string> = {
    put: '现存记录',
    history: '放样历史记录',
    out: '取样记录',
    alarm: '报警记录',
    disinfect: '消毒使用记录'
}
const columns = TableColumns[tableName as keyof typeof TableColumns]

const tableData = ref<Array<testTube | testTubeHistory | device | nurse | white | error | disinfect | RetryTask>>([]);

const currentPage = ref(1);
const pageSize = ref(10);

const pagination = computed(() => {
    return {
        position: ['topLeft'],
        total: tableData.value.length,
        showTotal: () => `总共${tableData.value.length}条数据`,
        pageSize: pageSize.value,
        current: currentPage.value,
        hideOnSinglePage: true,
        onChange: (page: number, size: number) => {
            currentPage.value = page;
            pageSize.value = size;
        }
    }
})


// 获取标题的方法，包含类型检查和默认值
const getTitle = () => {
    if (recordType && recordType in recordsName) {
        return recordsName[recordType as RecordType];
    }
    return '记录详情';
};

async function getAllData() {
    tableData.value = await db[`${tableName}`].toArray()
    console.log(tableData.value);
}

function imgSrc(img: File | Blob) {
    // console.log(img);
    if (img instanceof File) {
        return URL.createObjectURL(img)
    } else {
        return img
    }
}

function changeData(pagination: any) {
    currentPage.value = pagination.current;
    pageSize.value = pagination.pageSize;
}

function exportData() {
    const csvData = convertDataToStringWithOrder(tableData.value, tableName)
    if (isAndroid()) {
        window.ClosetAndroid.exportCsvData(csvData, `${recordsName[recordType as RecordType]}.csv`)
    }
}

onMounted(() => {
    getAllData()
})

</script>
<style lang="scss" scoped></style>